<template>
  <div class="Detail_business">
    <PullRefresh
      :disabled="disabled"
      class="detail"
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <div class="seaInfo-detail">
        <div class="info pb-12px">
          <h4 class="flex justify-between pb-12px items-center">
            <div class="name">基本信息</div>
            <div>
              <Button
                v-if="permissionVerification('edit', detailType)"
                size="mini"
                @click="edit"
                style="width: 64px; padding: 0; height: 25px"
                class="flex justify-between"
                ><div class="flex items-center">
                  <img
                    src="../../../assets/business/icon_bj.png"
                    alt=""
                    style="width: 14px; height: 14px"
                    class="mr-6px"
                  />
                  <span>编辑</span>
                </div>
              </Button>
            </div>
          </h4>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >商机名称：</span
            >
            <span class="text">{{ info.name }}</span>
          </div>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >所属城市：</span
            >
            <span class="text">{{ info.storeCity }}</span>
          </div>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >品&emsp;&emsp;类：</span
            >
            <span class="text">{{ info.categoryStr }}</span>
          </div>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >类&emsp;&emsp;型：</span
            >
            <span class="text">{{ info.typeStr }}</span>
          </div>
        </div>
        <div class="info pb-12px">
          <h4><div class="name pb-12px">状态信息</div></h4>
          <div class="flex justify-between">
            <div>
              <span class="inline-block pt-12px pr-4px name_text"
                >数据状态：</span
              >
              <span class="text"> {{ info.dataStatusStr }}</span>
            </div>
            <div>
              <Button
                v-show="permissionVerification('changeinfo', detailType)"
                class="btn"
                @click="changeClick((type = 1))"
                size="mini"
                >变更</Button
              >
            </div>
          </div>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >商机状态：</span
            >
            <span class="text">{{ info.businessOpportunityStatusStr }}</span>
          </div>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >最新跟进状态：</span
            >
            <span class="text">{{ info.lastFollowUpStatusStr }}</span>
          </div>
        </div>
        <div class="info pb-12px">
          <h4><div class="name pb-12px">归属&信息来源</div></h4>
          <div class="flex justify-between">
            <div>
              <span class="inline-block pt-12px pr-4px name_text"
                >当前归属BD：</span
              >
              <span class="text">{{ info.belongUsername }}</span>
            </div>
            <div>
              <Button
                v-show="permissionVerification('changebd', detailType)"
                @click="changeClick((type = 2))"
                class="btn"
                size="mini"
                >变更</Button
              >
            </div>
          </div>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >创建人员：</span
            >
            <span class="text">{{ info.createUsername }}</span>
          </div>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >创建时间：</span
            >
            <span class="text">{{ info.createTime }}</span>
          </div>
          <div>
            <span class="inline-block pt-12px pr-4px name_text"
              >来&emsp;&emsp;源：</span
            >
            <span class="text">{{ info.dataSourceStr }}</span>
          </div>
        </div>
      </div>
    </PullRefresh>
    <ActionSheet
      v-model="editShow"
      title="编辑基本信息"
      :closeable="false"
      class="safePadding my_form"
    >
      <van-form
        :show-error-message="false"
        :show-error="false"
        ref="form"
        class="pb-16px"
        label-width="60"
      >
        <van-field
          v-model="editInfo.name"
          name="商机名称"
          label="商机名称"
          placeholder="商机名称"
          :rules="[{ required: true, message: '请填写商机名称' }]"
          :class="editInfo.name ? 'exist_value' : ''"
        />
        <van-field
          readonly
          clickable
          name="area"
          is-link
          :value="editInfo.categoryStr"
          label="选择品类"
          placeholder="点击选择品类"
          @click="changeCategory"
          :rules="[{ required: true, message: '请选择品类' }]"
          :class="editInfo.categoryStr ? 'exist_value' : ''"
        />

        <van-field
          readonly
          clickable
          is-link
          name="area"
          :value="editInfo.typeStr"
          label="选择类型"
          placeholder="点击选择类型"
          @click="changeType"
          :rules="[{ required: true, message: '请选择类型' }]"
          class="border_none"
          :class="editInfo.typeStr ? 'exist_value' : ''"
        />
        <PopupAction @confirm="editSubmit" @cancel="editShow = false" />
      </van-form>
    </ActionSheet>
    <!-- 品类 -->
    <selections
      ref="selections"
      @closeSlection="closeSlection"
      @confirmSel="confirmSel"
    ></selections>
    <van-popup
      round
      @close="close"
      v-model="showType"
      position="bottom"
      class="safePadding stateInfo"
    >
      <h3 class="px-4 py-5">选择类型</h3>
      <van-picker ref="changeType" :columns="typeData" :swipe-duration="100" />
      <PopupAction @confirm="confirmType" @cancel="showType = false" />
    </van-popup>
    <ActionSheet
      :closeable="false"
      v-model="show"
      :title="title"
      class="safePadding stateInfo"
    >
      <van-picker ref="status" :columns="columns" :swipe-duration="100" />
      <PopupAction @confirm="sure" @cancel="onCancel" />
    </ActionSheet>
    <ActionSheet
      class="seach_bd"
      :closeable="false"
      v-model="showBD"
      title="变更BD"
      ref="78UUHJ"
    >
      <div class="bd_box">
        <SeachSelect
          @changeInputVal="changeInputVal"
          :id="id"
          label="BD"
          ref="selectionsBD"
        >
        </SeachSelect>
      </div>
      <PopupAction @confirm="changeBdSubmit" @cancel="cancel" />
    </ActionSheet>
  </div>
</template>

<script>
import {
  Button,
  ActionSheet,
  Picker,
  PullRefresh,
  Form,
  Field,
  Popup,
  Toast,
} from "vant";
import {
  businesInfo,
  changeStatus,
  businessDataStatus,
  editBaseInfo,
  businessChangeBd,
} from "@/services/business/HighSeas.js";
import selections from "./selections.vue";
import SeachSelect from "@/components/ll-seach-select";
import { getLocationParam, permissionVerification } from "@/utils/tools";
import PopupAction from "@/views/business/components/popup_action.vue";
export default {
  components: {
    Button,
    ActionSheet,
    SeachSelect,
    [Picker.name]: Picker,
    [Form.name]: Form,
    [Field.name]: Field,
    [Popup.name]: Popup,
    PullRefresh,
    selections,
    PopupAction,
  },
  props: {
    detailType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      editInfo: {
        name: "",
        type: null,
        category: null,
        id: null,
      }, //商机基本信息编辑表单数据
      showType: false, //类型弹窗
      categoryList: [], //品类数据
      title: "",
      showBD: false,
      typeData: [],
      typeData1: [],
      id: null,
      info: {},
      show: false,
      editShow: false,
      columns: [],
      dataStatus: [],
      isLoading: false,
      disabled: false,
      selectionsData: {}, //品类选择数据
      BDdata: {}, //变更BD获取的数据
      permission: "",
      permissionVerification: permissionVerification,
    };
  },
  methods: {
    change(val) {
      this.id = val;
      this.get_per();
      this.getData();
    },
    cancel() {
      this.showBD = false;
      this.$nextTick(() => {
        this.$refs.selectionsBD.get_null();
      });
    },
    get_per() {
      if (this.detailType === "临时库" || this.detailType === "私海") {
        let per = getLocationParam("permission");
        this.permission = per;
      }
    },
    changeInputVal(val) {
      this.BDdata = val;
      console.log(this.BDdata);
    },
    changeBdSubmit() {
      businessChangeBd({
        id: this.id,
        name: this.BDdata.name,
        jobNo: this.BDdata.jobNo,
        companyId: Number(this.BDdata.companyId),
        bdId: this.BDdata.id,
      })
        .then((res) => {
          console.log(res);
          //变更成功之后需要添加一条商机转移的通知 双方都要收到
          this.showBD = false;
          this.getData();
        })
        .catch((e) => {
          console.log(e);
          this.showBD = false;
          Toast(e.message || e.errMessage);
        });
    },
    // 关闭品类选择
    closeSlection() {
      this.editShow = true;
    },
    // 提交品类选择
    confirmSel(data) {
      let r = [];
      data.value.forEach((item) => {
        r.push(item.name);
      });
      this.selectionsData = data;
      this.categoryList = { value: data.value, lable: r.join("-") };
      this.editInfo.categoryStr = r.join("-");
      this.editShow = true;
      // console.log(this.categoryList);
    },
    close() {
      this.editShow = true;
      this.showType = false;
      this.showArea = false;
    },
    confirmType() {
      this.showType = false;
      let val = this.$refs.changeType.getValues()[0];
      this.typeData1.forEach((v) => {
        if (v.name == val) {
          this.editInfo.typeStr = val;
          this.editInfo.type = v.type;
        }
      });
    },
    //选择类型
    changeType() {
      this.editShow = false;
      this.showType = true;
      this.typeData = [];
      businessDataStatus({ type: "business_opportunity_type" }).then((res) => {
        res = res.slice(1);
        res.forEach((v) => {
          // if (v.type === this.editInfo.type) {
          //   this.$refs.changeType.getValues = v.name;
          // }
          this.typeData.push(v.name);
        });
        console.log(this.typeData);
        this.typeData1 = res;
      });
    },
    //选择品类
    changeCategory() {
      this.editShow = false;
      console.log(this.selectionsData);
      this.$refs.selections.open(this.selectionsData);
    },
    // 编辑
    edit() {
      this.editShow = true;
      this.editInfo = { ...this.info };
    },
    editSubmit() {
      this.$refs.form
        .validate()
        .then(() => {
          if (this.categoryList && this.categoryList.value) {
            this.editInfo.categoryOne = this.categoryList.value[0].id;
            this.editInfo.categoryTwo = this.categoryList.value[1].id;
            this.editInfo.categoryThree = this.categoryList.value[2].id;
          }
          let parmas = {
            name: this.editInfo.name,
            type: this.editInfo.type,
            categoryOne: this.editInfo.categoryOne,
            categoryTwo: this.editInfo.categoryTwo,
            categoryThree: this.editInfo.categoryThree,
            id: this.editInfo.id,
          };
          editBaseInfo(parmas)
            .then((res) => {
              console.log(res);
              this.getData();
            })
            .catch((e) => {
              Toast(e.message);
            });
        })
        .catch((err) => {
          Toast({ message: err.errMessage || err.message, position: "top" });
        });
      this.editShow = false;
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
      console.log("ioi000oio");
      this.getData();
    },
    getData() {
      console.log("8888");
      // if (this.$route.query && this.$route.query.id) {
      //   this.id = Number(this.$route.query.id);
      // }
      // if (this.$store.state.business.businessId) {
      //   this.id = this.$store.state.business.businessId;
      // } else {
      //   this.id = Number(this.$route.query.id);
      // }
      businesInfo({ id: this.id })
        .then((res) => {
          this.info = res;
          this.$store.commit("business/get_groupId", {
            value: this.info.businessOpportunityGroupId,
          });
        })
        .catch((err) => {
          console.log(err);
          Toast(err.errMessage || err.message);
        });
    },
    sure() {
      this.show = false;
      let val = this.$refs.status.getValues()[0];
      if (this.title === "状态信息") {
        this.dataStatus.forEach((v) => {
          if (v.name == val) {
            changeStatus({
              id: this.id,
              status: v.type,
            })
              .then((res) => {
                console.log(res);
                this.getData();
              })
              .catch((err) => {
                Toast(err.errMessage || err.message);
              });
          }
        });
      }
    },
    onCancel() {
      this.show = false;
    },
    changeClick(type) {
      this.columns = [];
      if (type === 1) {
        this.show = true;
        this.title = "状态信息";
        businessDataStatus({ type: "business_opportunity_data_status" })
          .then((res) => {
            res = res.slice(1);
            res.forEach((v) => {
              this.columns.push(v.name);
              this.dataStatus = res;
            });
          })
          .catch((e) => {
            Toast(e.message || e.errMessage);
          });
      } else if (type === 2) {
        this.showBD = true;
        this.$nextTick(() => {
          this.$refs.selectionsBD.get_null();
        });
      }
    },
  },
  watch: {
    editShow(val) {
      if (val) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    showType(val) {
      if (val) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    showBD(val) {
      if (val) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.Detail_business {
  height: calc(100vh - 90px);
  padding-bottom: 10px;
  overflow: auto;
  .safePadding {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }
  .van-action-sheet__header {
    text-align: left;
    line-height: normal;
    padding-top: 20px;
    padding-bottom: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    padding-left: 16px;
  }

  .seaInfo-detail {
    padding: 10px;
    .info {
      padding-top: 16px;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 8px;
      color: #666;
      font-size: 13px;
      & > div {
        margin-left: 12px;
      }
      .btn {
        border: none;
        margin-right: 12px;
        .van-button__text {
          color: #1d6fe9;
          font-size: 14px;
        }
      }
    }
  }
  h4 {
    padding-right: 12px;
    border-bottom: 1px solid #f5f5f5;
    .name {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      display: flex;
      align-items: center;
      flex-grow: 1;
      &:before {
        content: "";
        border-left: 4px solid #1d6fe9;
        margin-right: 8px;
        height: 12px;
        display: block;
      }
    }
    .van-button--mini {
      border-radius: 16px;
      border: 1px solid #1d6fe9;
      background-color: rgba(29, 111, 233, 0.1);
      padding: 4px 10px;
      .van-icon-edit:before {
        color: #1d6fe9;
        margin-right: 2px;
      }
      .van-button__text {
        color: #1d6fe9;
        font-size: 12px;
      }
    }
    .name_text {
      word-break: keep-all;
    }
  }
  .seach_bd {
    padding: 0 16px;
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
    .van-action-sheet__header {
      padding-left: 0;
    }
    .btn_box {
      padding: 0 30px;

      display: flex;
      justify-content: space-between;
      .van-button--mini {
        background-color: #fff !important;
        color: #1d6fe9;
        font-size: 16px;
      }
      .no {
        border: none;
        color: #666;
      }
    }
    ::v-deep .van-ellipsis {
      color: #999;
    }
  }
}
</style>
<style lang="less">
.detail {
  .van-action-sheet__header {
    text-align: left;
    padding-left: 16px;
  }
  .van-action-sheet__content {
    padding-bottom: 50px;
  }
  .van-picker-column__item--selected .van-ellipsis {
    color: #1d6fe9;
  }
  .van-icon-edit:before {
    margin-right: 2px !important;
  }
  .text {
    color: #333333;
  }
}
</style>
